<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Aue.js demo</title>
		<script src="js/aue.js"></script>
		<style>
			body {
				text-align: center;
			}

			.red {
				background-color: red;
				width: 80px;
				height: 80px;
				margin: 0 auto;
			}

			.big {
				width: 200px;
				height: 200px;
			}

			#todolist {
				text-align: start;
			}
		</style>
	</head>
	<body>

		<div id="app">
			<h1>{{ title }}</h1>
			<p>{{ message }}</p>

			<p>time: {{ time }}</p>
			<p a-once>[once] time: {{ time }}</p>
			<input type="button" a-value="Get time" a-click="getTime" />

			<br /><br />

			<input id="input" a-model="inputText" />
			<input type="button" a-value="clear" a-click="clear" />
			<p>text: {{ inputText }}</p>

			<input type="button" a-value="click me!" a-click="fn" />

			<br /><br />

			<input a-model="content" />
			<input a-model="content" />
			<p>{{ content }}</p>

			<input type="radio" a-model="content" />
			<input type="checkbox" a-model="content" />

			<br /><br />

			<input type="checkbox" a-checked="isChecked" />
			<input type="button" a-value="switch isChecked" a-click="switchChecked" />

			<br /><br />

			<div a-show="isShow" class="red"></div>
			<input type="button" a-value="switch isShow" a-click="switchShow" />

			<br /><br />

			<div a-class="{ red: 'isActive', big: 'isBig'}"></div>
			<input type="button" a-value="switch isActive" a-click="switchActive" />
			<input type="button" a-value="switch isBig" a-click="switchBig" />

			<br /><br />

			<div id="todolist">
				<input a-model="addText" />
				<input type="button" a-value="add" a-click="addItem" />
				<ol>
					<li a-for="item in list">
						{{ item }}
						<button type="button" a-click="deleteItem({{ index }})">delete</button>
					</li>
				</ol>
			</div>
		</div>

		<script>
			var app = new Aue({
				el: " #app",
				data: {
					title: 'Aue.js',
					message: 'Welcome to Aue.js!',
					time: new Date(),
					inputText: '',
					content: 'Update data synchronously',
					isChecked: true,
					isShow: true,
					isActive: true,
					isBig: false,
					list: ['Have  a meal', 'Go to bed', 'Playing games'],
					addText: '',
				},
				methods: {
					getTime: function() {
						alert(aue.time);
					},
					clear: function() {
						aue.inputText = '';
					},
					fn: function(self) {
						alert(self.value);
					},
					switchChecked: function(self) {
						aue.isChecked = !aue.isChecked;
					},
					switchShow: function() {
						aue.isShow = !aue.isShow;
					},
					switchActive: function() {
						aue.isActive = !aue.isActive;
					},
					switchBig: function() {
						aue.isBig = !aue.isBig;
					},
					deleteItem: function(index) {
						delete aue.list[index];
						aue.list = aue.list;
					},
					addItem: function() {
						aue.list[aue.list.length] = aue.addText;
						aue.list = aue.list;
						aue.addText = '';
					},
				}
			});

			setInterval(function() {
				aue.time = new Date();
			});
		</script>
	</body>
</html>
